<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>物品记录管理</title>
    <link rel="shortcut icon" href="../fffff.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/my.css"/>
</head>
<body>
<ul class="layui-nav layui-bg-green my" lay-filter="">
    <li class="layui-nav-item my">注册</li>
</ul>


<form class="layui-form " action="" method="post">
    <div class="loginformAndre">
        <div class="layui-form-item ">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="user" id="user" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" id="password" placeholder="请输入密码"
                       autocomplete="off" class="layui-input" onblur="checkPwd()">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" placeholder="请输入手机号"
                       autocomplete="off" class="layui-input" >

                <span class="layui-btn" id="captcha" style="margin-top: 15px; margin-right: 0;" onclick="send()" >获取验证码</span>

                <span class="layui-btn " style="margin-top: 15px;  background-color: #FFFFFF;" id="ha">
							<font color="#000000" id="num"></font>
						</span>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="check" id="inputcode" placeholder="请输入手机上的验证码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit lay-filter="formDemo" id="register">注册</a>
            </div>
        </div>
    </div>
</form>


<script>

</script>
<script type="text/javascript">

</script>


<script src="../layui/layui.all.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script >

    function checkPwd() {
        var pwd = $("#password").val();

        var reg = /^[a-zA-Z0-9]{4,10}$/;
        if (reg.test(pwd) == false) {
            layer.msg("密码不能含有非法字符，长度在4-10之间,大小写字母数字任意组合");

        }

    }
    function send() {

        if($("#phone").val()==""){
            layer.msg("请输入手机号。");
            return;
        }else{
            if (!(/^1[3456789]\d{9}$/.test($("#phone").val()))) {
                layer.msg("手机号码有误，请重填");
                return;
            }
        }


        $("#captcha").hide()
        $("#ha").css("background-color", "#fd8140");
        $("#num").show()
        var second = 60
        $("#num").text((second) + "秒")
        var phone = $("#phone").val();


        $.ajax({
            url: "/user/phone/" + phone,
            type: 'POST',
            contentType: false,
            processData: false,
            cache: false,
            success: function (data) {
                if (data.success) {
                    layer.msg('发送成功');
                } else {
                    layer.msg(data.msg);
                }
            }
        })

        var interval = setInterval(function () {
            second--
            $("#num").text((second) + "秒")
            if (second === -1) {
                $("#ha").css("background-color", "#ffffff");
                $("#captcha").text("重发验证码")
                clearInterval(interval)
                $("#num").hide()
                $("#captcha").show()
            }
        }, 1000)
    }

    $(function () {
        layui.use('layer', function () {
            var layer = layui.layer;

        });

        $("#phone").change(function () {
            $("#captcha").css("pointer-events", "auto");
        })

        $("#register").click(function () {
            var formData = new FormData();
            formData.append('user', $("#user").val());
            formData.append('password', $("#password").val());
            formData.append('phone', $("#phone").val());
            formData.append('code', $("#inputcode").val());
            $.ajax({
                url: "/user/register",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                cache: false,
                success: function (data) {
                    if (data.success) {
                        layer.msg('注册成功,可以登录');
                        setTimeout(function () {
                            window.location.href = "/login";
                        }, 800);

                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        })




    })
</script>
</body>

</html>
